// 导入模块   
const gulp = require('gulp') // gulp模块，用于创建任务的
const uglify = require('gulp-uglify') // 压缩JS 去空格去注释
const babel = require('gulp-babel') // es6转es5 浏览器兼容 babel
const rev = require('gulp-rev') // 加随机名的，内容修改就重新生成新的随机名
const revCollector = require('gulp-rev-collector') // 根据temp目录记录的规则 替换 html路径
const clean = require('gulp-clean') // 删除目录文件的
const minifyCSS = require('gulp-minify-css') // 压缩CSS 去空格去注释的
// const imagemin = require('gulp-imagemin') // 压缩图片
const htmlmin = require('gulp-htmlmin') // 压缩HTML 去空格去注视

// 打包HTML任务
// gulp.task('html', () => {
gulp.task('html', (over) => {
    let options = {
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        minifyJS: true, //压缩页面JS
        minifyCSS: true, //压缩页面CSS
    }
    gulp
        // .src('./src/html/*.html')
        // .src(['temp/**/*.json', './src/html/*.html'])
        .src(['temp/**/*.json', './src/*.html'])
        .pipe(revCollector())
        .pipe(htmlmin(options))
        // .pipe( gulp.dest('./dist/html/') )
        .pipe(gulp.dest('./dist/'))

    over()
})

// 打包IMG任务（图片不用加随机名）
// gulp.task('imgs', () => {
gulp.task('imgs', (over) => {
    gulp.src('./src/imgs/*.*')
        // .pipe( imagemin() )
        .pipe(gulp.dest('./dist/imgs/'))

    // over()

    setTimeout(() => {
        over()
    }, 30000) // 30s
})

// 打包CSS任务
// gulp.task('css', () => {
gulp.task('css', (over) => {
    gulp.src('./src/css/*.css')
        .pipe(minifyCSS())
        .pipe(rev())
        .pipe(gulp.dest('./dist/css/'))
        // ------------------------------
        // 每次打包
        // 将css对应的随机名保存到json中
        // ------------------------------
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/css'))

    over()
})

// 清除目录
const fs = require('fs')
// gulp.task('clean', () => {
gulp.task('clean', (over) => {
    if (fs.existsSync('dist/')) {
        gulp.src('dist/', { read: false }).pipe(clean())
    }

    // over()

    setTimeout(() => {
        // 因为clean这里面的代码都是异步的
        over()
    }, 2000)
})

// 打包JS任务
// gulp.task('js', () => {
// gulp.task('js', (over) => {
gulp.task('js', (over) => {
    // gulp.src('./src/js/a.js')
    // gulp.src(['./src/js/a.js', './src/js/b.js'])
    gulp.src('./src/js/*.js')
        // .pipe(模块名())
        .pipe(babel({ presets: ['env'] }))
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest('./dist/js/'))
        // ------------------------------
        // 每次打包
        // 将js对应的随机名保存到json中
        // ------------------------------
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/js'))

    over()
})

// 打包上线
gulp.task(
    'build',
    gulp.series('clean', 'js', 'css', 'imgs', 'html', () => {
        console.log('BUILD打包完成')
    })
)

// 开发调试
const { createProxyMiddleware } = require('http-proxy-middleware')
const server = require('browser-sync').create()
const watch = require('gulp-watch')
const sass = require('gulp-dart-sass')
gulp.task('serve', () => {
    server.init({
        port: 80,
        // server:'./src',
        server: {
            baseDir: './src',
            middleware: [
                // ...
                // 代理请求的地址：target + $.get/post/ajax的url
                // http://kg.zhaodashen.cn/v1/web2105/goods/like.jsp
                // createProxyMiddleware('要监控的请求地址', {固定格式})
                createProxyMiddleware('/api', {
                    // 目标服务器网址
                    target: 'http://kg.zhaodashen.cn/mt/web/',
                    changeOrigin: true, // 是否允许跨域
                    secure: false, // 关闭SSL证书验证https协议接口需要改成true
                    pathRewrite: {
                        // 重写路径请求
                        '^/api': '',
                    },
                }),
                // ...
            ],
        },
    })

    // 监控文件修改
    watch('src/*.html', function () {
        console.log('你修改HTML文件了')
        server.reload()
    })
    watch('src/assets/scss/*.scss', function () {
        console.log('你修改SCSS文件了')
        gulp.src('src/assets/scss/*.scss')
            .pipe(sass().on('error', sass.logError))
            .pipe(gulp.dest('src/assets/css'))
        server.reload()
    })
    watch('src/assets/js/*.js', function () {
        console.log('你修改JS文件了')
        server.reload()
    })
})
